<template>
    <div class="ai-mobile-container">
        <!-- <div class="top-box">
            <img src="@/assets/images/img_logo.png" style="width: 30px;">
            <i class="iconfont icon-gengduo"></i>
        </div> -->

        <div class="list-box" ref="mobildListContainer">
            <div class="message-row" v-for="(item, index) in chatArr" :key="index"
                :class="item.role === 'customer' ? 'customer-message-row' : ''">

                <img v-if="item.role === 'ai'" src="@/assets/images/img_circle.webp"
                    style="width: 30px;margin-right:10px;margin-top:5px">

                <div v-if="item.type === 'text'" class="message-box"
                    :class="item.role === 'customer' ? 'customer-message-box' : 'ai-message-box'">
                    <span v-html="item.content"></span>
                    <i v-if="item.role === 'ai' && index === chatArr.length - 1 && running === true"
                        class="iconfont icon-gengduo fade-element" style="color:#606266"></i>
                    <div v-if="item.role === 'ai'" style="margin-top: 10px;" class="status-row">
                        <span>{{ item.status }}</span>
                        <i v-if="item.status === '回答完成'" class="iconfont icon-completed"
                            style="color: #67C23A;margin-left: 5px;font-size: 12px;"></i>
                    </div>
                </div>

                <el-image v-if="item.type === 'image'" style="width: 50px; height: 50px;border-radius: 10px;"
                    :src="item.content" fit="fill" />

                <div v-if="item.type === 'document'" class="document-message-box">
                    <img src="@/assets/images/img_doc.png" style="width:30px;margin-right:10px" />
                    <div>
                        <div style="font-size:14px">{{ (item.content as documentInfoVO).name }}</div>
                        <div style="color:#A3A6AD;font-size: 10px;">{{ (item.content as documentInfoVO).size }} KB</div>
                    </div>
                </div>

            </div>



        </div>

        <div class="submit-box">

            <div class="stop-row" v-if="running">
                <div class="stop-btn">
                    <i class="iconfont icon-tingzhi1"></i>
                    <span @click="handleStop()" style="margin-left:10px">停止回答</span>
                </div>
            </div>



            <div class="submit-operate-box">
                <div class="files-row">
                    <template v-if="fileArr.length > 0">
                        <div class="image-list-row" v-if="currentUploadType === 'image'">
                            <div v-for="(item, index) in fileArr" :key="index">
                                <el-image style="width: 50px; height: 50px;margin-right:10px;border-radius: 10px;"
                                    :src="item.imgurl" fit="fill" />
                            </div>
                        </div>

                        <div class="document-list-row" v-if="currentUploadType === 'document'">
                            <div v-for="(item, index) in fileArr" :key="index" class="document-item">
                                <img src="@/assets/images/img_doc.png" style="width:30px;margin-right:10px" />
                                <div>
                                    <div style="font-size:12px">{{ item.documentInfo.name }}</div>
                                    <div style="color:#A3A6AD;font-size: 10px;">{{ item.documentInfo.size }} KB
                                    </div>
                                </div>

                            </div>
                        </div>

                    </template>

                </div>
                <div class="input-row">
                    <el-input v-model="keyword" style="width: 100%;" :autosize="{ minRows: 1, maxRows: 4 }"
                        type="textarea" placeholder="在这里输入" />
                </div>
                <div class="operate-row">
                    <div class="upload-box">
                        <el-upload :show-file-list="false" action="#"
                            :http-request="(e: uploadFileVO) => handleUpload(e, 'image')" multiple :limit="10"
                            :accept="imageAcceptType">
                            <el-tooltip effect="light" content="上传图片" placement="top-start">
                                <img src="@/assets/images/img_images.png" alt="上传图片"
                                    style="width: 22px;margin-right: 10px;">
                            </el-tooltip>
                        </el-upload>

                        <el-upload :show-file-list="false" action="#"
                            :http-request="(e: uploadFileVO) => handleUpload(e, 'document')" multiple :limit="10"
                            :accept="doucmentAcceptType">
                            <el-tooltip effect="light" content="上传文件" placement="top-start">
                                <img src="@/assets/images/img_files.png" alt="上传文件" style="width: 22px;">
                            </el-tooltip>
                        </el-upload>
                    </div>
                    <div>
                        <div class="submit-btn" @click="handleSubmit()"
                            :style="{ 'background': !isCanSubmit ? '#C0C4CC' : 'linear-gradient(to right, #3ee8ff, #5a50f7)' }">
                            发送 <i class="iconfont icon-fasong4" style="font-size:20px"></i>
                        </div>
                    </div>

                </div>
            </div>

        </div>







    </div>
</template>

<script setup lang="ts">
import { chatItemVO, fileItemVO, uploadFileVO, documentInfoVO } from "@/interface/interface"
import { ref, watch, onMounted } from "vue"
import emitter from '@/utils/emitter'

const keyword = ref("")
const mobildListContainer = ref<HTMLDivElement | null>(null)

emitter.on('scrollToBottom', () => {
    if (mobildListContainer.value) {
        mobildListContainer.value.scrollTop = mobildListContainer.value.scrollHeight;
    }
})

emitter.on('clearKeyword', () => {
    keyword.value = ""
})






const emits = defineEmits(['handleInput'])
const props = defineProps({
    loading: {
        type: Boolean,
        default: false
    },
    isCanSubmit: {
        type: Boolean,
        default: false
    },
    chatArr: {
        type: Array as () => chatItemVO[],
        default: []
    },
    fileArr: {
        type: Array as () => fileItemVO[],
        default: []
    },
    currentUploadType: {
        type: String,
        default: ""
    },
    handleUpload: {
        type: Function,
        default: () => { }
    },

    imageAcceptType: {
        type: String,
        default: ""
    },
    doucmentAcceptType: {
        type: String,
        default: ""
    },

    handleSubmit: {
        type: Function,
        default: () => { }
    },

    running: {
        type: Boolean,
        default: false
    },
    handleStop: {
        type: Function,
        default: () => { }
    },
})






watch(keyword, (value) => {
    emits("handleInput", value)
})



</script>

<style scoped>
.ai-mobile-container {
    width: 100vw;
    height: 100vh;
    /* background-image: linear-gradient(135deg, #a6d7f8, #f1f6fc, #a6d7f8); */
    background: #f6f7fc;


    /* padding:20px; */

    /* display: flex; */
    flex-direction: column;
    justify-content: space-between;

}

.top-box {
    width: 100%;
    height: 50px;
    background: #f6f7fc;
    /* border-bottom:1px solid #eee; */
    /* background: #fff; */
    padding: 0 10px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex-grow: 0;
    flex-shrink: 0;
}

.list-box {
    width: 100%;
    /* height: 100%; */

    padding: 0px 10px;
    flex-grow: 1;
    flex-shrink: 1;
    background: #f6f7fc;
    overflow: scroll;

}


.submit-box {
    width: 100%;
    /* height: 120px; */
    background: #f6f7fc;
    padding: 10px;
    flex-grow: 0;
    flex-shrink: 0;


}

.submit-operate-box {
    width: 100%;
    /* height: 100%; */
    background: #fff;
    border-radius: 10px;
    border: 1px solid #eee;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.submit-operate-box .input-row {
    width: 100%;
    margin: 10px auto
}

.submit-operate-box .operate-row {

    width: 100%;
    height: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.submit-operate-box .operate-row .upload-box {
    display: flex;
    justify-content: flex-start;

}

.m-textarea {

    all: unset;
    overflow: auto;
    width: 100%;
}

.submit-btn {
    padding: 3px 10px;
    background: linear-gradient(to right, #3ee8ff, #5a50f7);
    border-radius: 6px;
    font-size: 12px;
    color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.stop-row {
    margin: 10px auto;
    background: #f6f7fc;
    display: flex;
    align-items: center;
    justify-content: center;

}

.stop-btn {
    border: 1px solid #CDD0D6;
    padding: 5px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;

    font-size: 12px;
    color: #303133;
    cursor: pointer;
}

.image-list-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /* border-bottom: 1px solid #f0f0f0; */
    /* padding-bottom: 5px; */
    /* margin-bottom: 5px; */
}

.document-list-row {
    display: flex;
    /* flex-direction:column ; */
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    /* border-bottom: 1px solid #f0f0f0; */
    /* padding-bottom: 5px; */
    /* margin-bottom: 5px; */
}

.document-message-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #f2f6fc;
    padding: 5px 10px;
    margin: 10px 5px;
    border-radius: 10px;
    background: #fff;
}

.document-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #E4E7ED;
    padding: 5px 15px;
    margin: 5px 5px;
    border-radius: 6px;
}


.message-row {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 20px auto;
}

.message-box {
    padding: 10px;
    background: #fff;

    font-size: 14px;
    color: #606266;
}

.document-message-box {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #f2f6fc;
    padding: 5px 10px;
    margin: 10px 5px;
    border-radius: 10px;
    background: #fff;
}

.customer-message-row {
    justify-content: flex-end;
}

.customer-message-box {
    /* background: #46a0fc; */
    background: linear-gradient(to right, #3ee8ff, #5a50f7);
    color: #fff;
    border-radius: 20px 20px 0 20px;
}

.ai-message-box {
    border-radius: 20px 20px 20px 0;
}

/* 定义动画 */
@keyframes fadeInOut {

    0%,
    100% {
        opacity: 1;
        /* 完全不透明 */
    }

    50% {
        opacity: 0;
        /* 完全透明 */
    }
}

/* 应用动画到元素 */
.fade-element {
    animation: fadeInOut 2s infinite;
    /* 动画名称 持续时间 无限循环 */
}
</style>